<template>
	<view>
		<view class="histogram">
			<view class="Title">
				<text>最近五次收支柱状图</text>
			</view>
			<view class="Picture">
				<canvas canvas-id="myid" id="myid" class="charts" @tap="tap" />
			</view>
		</view>
		<view class="Pies">
			<view class="Title">
				<text>总支出饼图</text>
			</view>
			<view class="">
				<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
			</view>
		</view>
		<view class="Pies">
			<view class="Title">
				<text>总收入饼图</text>
			</view>
			<view class="">
				<qiun-data-charts type="pie" :opts="opts1" :chartData="chartData1" />
			</view>
		</view>

	</view>
</template>

<script>
	import uCharts from '../../node_modules/@qiun/ucharts/u-charts.js';
	var uChartsInstance = {};
	export default {
		data() {
			return {
				toTalList: [{
						text: '收入',
						num: 0,
						color: '#afffff',
						fontColor: '#10b0f0'
					},
					{
						text: '支出',
						num: 0,
						color: '#ffcfcf',
						fontColor: '#ff1f1f'
					}
				],
				BillList: {},
				cWidth: 750,
				cHeight: 500,
				categories: [],
				shouru: [],
				zhichu: [],
				chartData: {},
				chartData1: {},
				opts: {
					color: ["#FC8452", "#1890FF", "#FAC858", "#EE6666", "#3CA272", "#73C0DE", "#9A60B4",
						"#ea7ccc", "#91CB74"
					],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				opts1: {
					color: ["#73C0DE", "#3CA272", "#F44452", "#ea7ffc", "#1890FF", "#aAC85f", "#E6666f", "#9A60B4","#ff0074"
					],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				pies: [],
				piezhichu: [],
				pieshouru: []
			};
		},
		onShow() {
			uni.showLoading({
				title:"加载中..."
			})
			this.upBillList()
			this.upLoadPies()
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
		},
		methods: {
			upBillList() {
				uniCloud.callFunction({
					name: 'searchBill',
					data: ''
				}).then(x => {
					this.BillList = x.result.res.data
					this.toTalList[0].num = x.result.AllTotal.AllIncomeTotal
					this.toTalList[1].num = x.result.AllTotal.AllExpenseTotal
					this.getServerData()
				}).catch(err => {
					console.log(err)
				})
			},
			upLoadPies() {
				uniCloud.callFunction({
					name: 'Searchzhichushouru',
					data: ''
				}).then(res => {
					this.pies = res.result.data
					uni.hideLoading()
				}).catch(err => {
					console.log(err)
				})
			},
			getServerData() {
				setTimeout(() => {
					for (let i = 0; i < (this.BillList.length) && i < 5; i++) {
						this.BillList[i]._id = this.BillList[i]._id.substring(5)
						this.categories.push(this.BillList[i]._id)
					}
					for (let i = 0; i < (this.BillList.length) && i < 5; i++) {
						this.shouru.push(this.BillList[i].IncomeTotal)
					}
					for (let i = 0; i < (this.BillList.length) && i < 5; i++) {
						this.zhichu.push(this.BillList[i].ExpenseTotal)
					}
					let res = {
						categories: this.categories,
						series: [{
								name: "收入",
								data: this.shouru
							},
							{
								name: "支出",
								data: this.zhichu
							}
						]
					};
					this.drawCharts('myid', res);
					for (let i = 0; i < (this.pies.length); i++) {
						if (this.pies[i].list[0].topOption == 1) {
							var val = {
								'name': this.pies[i]._id,
								"value": this.pies[i].Total,
								"labelText": this.pies[i]._id + ': ' + this.pies[i].Total.toString() + '元'
							}
							this.piezhichu.push(val)
						}
					}
					let pie1 = {
						series: [{
							data: this.piezhichu
						}]
					};
					for (let i = 0; i < (this.pies.length); i++) {
						if (this.pies[i].list[0].topOption == 0) {
							var val = {
								'name': this.pies[i]._id,
								"value": this.pies[i].Total,
								"labelText": this.pies[i]._id + ': ' + this.pies[i].Total.toString() + '元'
							}
							this.pieshouru.push(val)
						}
					}
					let pie2 = {
						series: [{
							data: this.pieshouru
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(pie1));
					this.chartData1 = JSON.parse(JSON.stringify(pie2))
				}, 500);
			},
			drawCharts(id, data) {
				const ctx = uni.createCanvasContext(id, this);
				uChartsInstance[id] = new uCharts({
					type: "column",
					context: ctx,
					width: this.cWidth,
					height: this.cHeight,
					categories: data.categories,
					series: data.series,
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group"
						}
					}
				});
			},
			tap(e) {
				uChartsInstance[e.target.id].touchLegend(e);
				uChartsInstance[e.target.id].showToolTip(e);
			}
		}
	}
</script>

<style>
	.charts {
		width: 100%;
		height: 500rpx;
	}

	.histogram-Title {
		margin: 10px 0px 0px 10px;


	}

	.Title text {
		font-size: 20px;
		font-weight: bold;
	}

	.Picture {
		margin-top: 15px;
	}

	.Title {
		margin-left: 15px;
		margin-top: 15px;
	}
</style>